<!DOCTYPE html>
<html> 
	<head> 
		<title>Striping Table</title> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		
		<script type="text/javascript" src="../javascript/lib/jquery-1.4.1/jquery-1.4.1.js" ></script>
		<style type="text/css">
			th { 
			     background:#0066FF; 
			     color:#FFFFFF; 
			     line-height:20px; 
			     height:30px; 
			} 
			  
			td { 
			     padding:6px 11px; 
			     border-bottom:1px solid #95bce2; 
			     vertical-align:top; 
			     text-align:center; 
			} 
			  
			td * { 
			     padding:6px 11px; 
			} 
			  
			tr.alt td { 
			     background:#ecf6fc;  /*这行将给所有的tr加上背景色*/ 
			} 
			  
			tr.over td { 
			     background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/ 
			} 
		</style>
		
		<script type="text/javascript"> 
			$(function(){ 
		        $(".stripe tr").mouseover(function(){   
		                $(this).addClass("over");
		             }).mouseout(function(){  
						$(this).removeClass("over");
					 })
		        //给class为stripe的表格的偶数行添加alt样式 ：单数odd 偶数even
		        $(".stripe tr:even").addClass("alt"); 
			}); 
		</script> 

	</head> 
	  
	<body> 
		<!--用class="stripe"来标识需要使用该效果的表格--> 
		<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">  
			<thead> 
			  <tr> 
			    <th>姓名</th> 
			    <th>年龄</th> 
			    <th>QQ</th> 
			    <th>Email</th> 
			  </tr> 
			</thead> 
			<tbody> 
			  <tr> 
			    <td>邓国梁</td> 
			    <td>23</td> 
			    <td>31540205</td> 
			    <td>gl.deng@gmail.com</td> 
			  </tr> 
			  <tr> 
			    <td>邓国梁</td> 
			    <td>23</td> 
			    <td>31540205</td> 
			    <td>gl.deng@gmail.com</td> 
			  </tr> 
			</tbody> 
		</table> 
	</body> 
</html> 